<template>

  <div class="common-layout">
    <el-container>
      <el-aside width="20">
        <div class="box">
            
        </div>
        <menuCom ></menuCom>
      </el-aside>
      <el-container>
        <el-header>
          <headerCom></headerCom>
        </el-header>
        <el-main class="backgroundimg">
          
          <!-- 面包屑 -->
          
            <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item to="/welcome">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: item.path }" v-for="item in newbread" :key="item.name">{{item.meta.default?.meta.name}}</el-breadcrumb-item>
          </el-breadcrumb>
          

          <!-- <img src="https://img2.baidu.com/it/u=168370693,188678764&fm=253&fmt=auto&app=120&f=JPEG?w=583&h=346" alt="" class="backgroundimg"> -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import headerCom from './layout/header.vue'
import menuCom from './layout/menu.vue'
import { ArrowRight } from '@element-plus/icons-vue'
import {useLogin} from '../store/cart'
import {storeToRefs} from 'pinia'
import { computed } from 'vue'

let userLogin = useLogin()
let {bread} = storeToRefs(userLogin)
// console.log(bread.value);
  // bread.value.splice(0,1)
let newbread = computed(()=>{
  return bread.value.filter(route=>route.path!=='/')
})
</script>
<style lang="scss" scoped>
.el-aside {
  background-color: aqua;
}

.el-header {
  background-color: aquamarine;
}

// .el-main {
  // background-color: blanchedalmond;
// }

.logo {
  height: 60px;
  background-color: chartreuse;
}
// .backgroundimg{
//   background-image:url(https://img2.baidu.com/it/u=168370693,188678764&fm=253&fmt=auto&app=120&f=JPEG?w=583&h=346) ;
//   background-repeat: no-repeat;
//   background-size: cover;
// }


.box {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    // width: 200px;
    // size:auto;
    background-image: url(https://img1.baidu.com/it/u=3492652353,1184037012&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=250);
    background-size: 100% ;
    background-repeat: no-repeat;
    background-position: left;
    // width: 63px;
}

// .img2 {
//     width: 100%;
//     height: 90%;
// }
</style>
  